<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />

    <title>Web Storage API example</title>

    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Bitter|Ubuntu+Mono"
      rel="stylesheet"
      type="text/css"
    />
    <link rel="stylesheet" href="style.css" />
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>
    <div class="wrapper">
      <h1>本地存储</h1>

      <p >
        This example is designed to demonstrate usage of the
        <a href="http://dev.w3.org/html5/webstorage/">W3C Web Storage API</a>. It should work as far
        back as IE8. Choose custom background colours, logos and fonts from the below drop down
        menus, then try closing and reopening the page — you will find that your choices are
        remembered, as they are stored using Web Storage. You can also visit the
        <a href="event.html" target="_blank">storage event output</a> (opens in new tab). Open this,
        change some values in the index page, then look at the events page — you'll see the storage
        changes reported.
      </p>

      <form>
        <div>
          <label for="bgcolor">选择背景颜色:</label>
          <input class="color" id="bgcolor" type="color" />
        </div>
        <div>
          <label for="font">选择字体:</label>
          <select id="font">
            <option value="'Open Sans Condensed', sans-serif" selected>Sans-serif</option>
            <option value="'Bitter', serif">Serif</option>
            <option value="'Ubuntu Mono'">Monospace</option>
          </select>
        </div>
        <div>
          <label for="image">选择图片:</label>
          <select id="image">
            <option value="images/tortoise.png">Tortoise</option>
            <option value="images/firefoxos.png">Firefox</option>
            <option value="images/crocodile.png">Crocodile</option>
          </select>
        </div>
      </form>

      <footer></footer>
      <img src="images/firefoxos.png" />
    </div>
  </body>
  <script>
    /* 实现功能 */


  </script>
</html>
